<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/9/17
  Time: 15:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>登录--汽车租赁系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" media="all" />
</head>
<body style="height: 100%; margin: 0">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">输入年份:</label>
            <div class="layui-input-inline" style="padding: 5px">
                <input type="text" name="year" id="year" autocomplete="off" class="layui-input layui-input-inline"
                       placeholder="请输入年份" style="height: 30px;border-radius: 10px">
            </div>
        </div>

        <div class="layui-inline" style="text-align: center">
            <button type="button"
                    class="layui-btn layui-btn-normal layui-icon layui-icon-search layui-btn-radius layui-btn-sm"
                    lay-submit  lay-filter="doSearch" style="margin-top: 4px">查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm layui-icon layui-icon-refresh layui-btn-radius layui-btn-sm"
                    style="margin-top: 4px">重置
            </button>
        </div>
    </div>
</form>
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/index.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/cache.js"></script>
<script>
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    // var app = {};
    var option = null;

    layui.use(['form','jquery'],function(){
        var form=layui.form;
        var $=layui.jquery;

        form.on('submit(doSearch)',function(data){
            $.post("${pageContext.request.contextPath}/statistic/statisticAssisShow",{"year":data.field.year},function(r){
                option = {
                    xAxis: {
                        type: 'category',
                        data: r.data.name
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: r.data.value,
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(220, 220, 220, 0.8)'
                        }
                    }]
                }

                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }

            })
        })
    })

    </script>
</body>
</html>
